<template>
  <view class="payment-success">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="success-icon">
          <uni-icons :type="successIconType" size="80" color="#fff"></uni-icons>
        </view>
        <view class="page-title">{{ successTitle }}</view>
        <view class="page-subtitle">{{ successSubtitle }}</view>
      </view>
    </view>

    <view class="content-container">
      <!-- 支付信息卡片 -->
      <view class="card payment-info-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper success-icon-small">
              <uni-icons type="wallet-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">支付信息</text>
          </view>
        </view>
        
        <view class="payment-details">
          <view class="detail-item">
            <text class="detail-label">订单编号</text>
            <text class="detail-value">{{ orderInfo.orderId || 'ORD' + Date.now() }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">支付方式</text>
            <text class="detail-value">{{ getPaymentMethodName() }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">支付状态</text>
            <text class="detail-value">{{ getPaymentStatusText() }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">支付时间</text>
            <text class="detail-value">{{ currentTime }}</text>
          </view>
          <view class="detail-divider"></view>
          <view class="detail-item amount-item">
            <text class="detail-label">支付金额</text>
            <text class="detail-amount">¥{{ orderInfo.amount || '99.00' }}</text>
          </view>
        </view>
      </view>

      <!-- 操作提示卡片 -->
      <view class="card action-card">
        <view class="action-content">
          <view class="action-icon">
            <uni-icons :type="actionIconType" size="24" :color="actionIconColor"></uni-icons>
          </view>
          <view class="action-text">
            <text class="action-title">{{ actionTitle }}</text>
            <text class="action-desc">{{ actionDesc }}</text>
          </view>
        </view>
        
        <!-- 线下支付回执上传 -->
        <view v-if="orderInfo.paymentType === 'offline'" class="receipt-upload">
          <view class="upload-title">
            <uni-icons type="camera" size="16" color="#667eea"></uni-icons>
            <text>上传支付回执</text>
          </view>
          <button class="upload-btn" @click="uploadReceipt">
            <uni-icons type="plus" size="16" color="#667eea"></uni-icons>
            <text>选择图片</text>
          </button>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="action-footer">
      <button class="action-btn secondary" @click="viewOrderDetail">
        <uni-icons type="list" size="20" color="#667eea"></uni-icons>
        <text class="btn-text">查看订单</text>
      </button>
      <button class="action-btn primary" @click="continueShopping">
        <uni-icons type="shop" size="20" color="#fff"></uni-icons>
        <text class="btn-text">继续购物</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderId: '',
        paymentType: 'online', // online 或 offline
        paymentMethod: '',
        transactionId: '',
        amount: '0.00'
      },
      currentTime: '',
      successIconType: 'checkmarkempty',
      successTitle: '订单提交成功',
      successSubtitle: '订单已生成',
      actionIconType: 'home',
      actionIconColor: '#667eea',
      actionTitle: '订单处理中',
      actionDesc: '我们将尽快为您安排发货，请在订单列表中查看物流信息'
    }
  },
  
  onLoad(options) {
    this.orderInfo.orderId = options.orderId || ''
    this.orderInfo.amount = options.amount || '0.00'
    this.orderInfo.paymentType = options.paymentType || 'online'
    this.orderInfo.paymentMethod = options.paymentMethod || ''
    this.orderInfo.transactionId = options.transactionId || ''
    
    // 根据支付类型设置显示内容
    this.setupPageContent()
    
    // 设置当前时间
    this.currentTime = new Date().toLocaleString()
  },
  
  methods: {
    setupPageContent() {
      if (this.orderInfo.paymentType === 'online') {
        // 线上支付成功
        this.successIconType = 'checkmarkempty'
        this.successTitle = '支付成功'
        this.successSubtitle = '订单已支付，商家正在准备发货'
        this.actionIconType = 'home'
        this.actionIconColor = '#667eea'
        this.actionTitle = '订单处理中'
        this.actionDesc = '我们将尽快为您安排发货，请在订单列表中查看物流信息'
      } else {
        // 线下支付（订单创建成功，等待支付回执）
        this.successIconType = 'compose'
        this.successTitle = '订单创建成功'
        this.successSubtitle = '请按照选择的支付方式完成付款，并上传支付回执'
        this.actionIconType = 'camera'
        this.actionIconColor = '#ff6b6b'
        this.actionTitle = '等待支付回执'
        
        if (this.orderInfo.paymentMethod === 'bank_transfer') {
          this.actionDesc = '请完成银行转账后，上传转账回执单，我们将在确认收款后安排发货'
        } else if (this.orderInfo.paymentMethod === 'cash') {
          this.actionDesc = '您选择了货到付款，商品送达时请准备好现金或扫码支付'
        } else {
          this.actionDesc = '请完成线下付款后，上传支付回执单'
        }
      }
    },
    
    getPaymentMethodName() {
      const methodMap = {
        'wxpay': '微信支付',
        'alipay': '支付宝',
        'balance': '余额支付',
        'bank_transfer': '银行转账',
        'cash': '货到付款'
      }
      return methodMap[this.orderInfo.paymentMethod] || '未指定'
    },
    
    getPaymentStatusText() {
      if (this.orderInfo.paymentType === 'online') {
        return '已支付'
      } else {
        return '等待付款'
      }
    },
    
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/detail?id=${this.orderInfo.orderId}`
      })
    },
    
    continueShopping() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    
    uploadReceipt() {
      // 选择图片
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.uploadReceiptImage(tempFilePath)
        },
        fail: (error) => {
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },
    
    async uploadReceiptImage(filePath) {
      uni.showLoading({
        title: '上传中...'
      })
      
      try {
        // 模拟上传回执
        const { uploadPaymentReceipt } = require('@/api/order')
        const response = await uploadPaymentReceipt(this.orderInfo.orderId, {
          receiptImage: filePath,
          paymentMethod: this.orderInfo.paymentMethod,
          orderAmount: this.orderInfo.amount
        })
        
        if (response && response.data) {
          uni.hideLoading()
          uni.showToast({
            title: '回执上传成功',
            icon: 'success'
          })
          
          // 上传成功后更新页面状态
          this.actionTitle = '回执已上传'
          this.actionDesc = '我们将在1-2个工作日内核实您的付款信息，确认后立即安排发货'
          this.actionIconType = 'checkmarkempty'
          this.actionIconColor = '#00b894'
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '上传失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.payment-success {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 140rpx;
}

/* 页面头部 */
.page-header {
  position: relative;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
}

.header-bg::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 40rpx;
  background: #f8f9fa;
  border-radius: 40rpx 40rpx 0 0;
}

.header-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24rpx;
  backdrop-filter: blur(10rpx);
}

.page-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}

.page-subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 内容容器 */
.content-container {
  padding: 20rpx;
}

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.success-icon-small {
  background: linear-gradient(135deg, #00b894, #00a085);
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

/* 支付详情 */
.payment-details {
  padding: 0 32rpx 32rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.detail-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.detail-value {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
}

.detail-divider {
  height: 2rpx;
  background: #e9ecef;
  margin: 16rpx 0;
}

.amount-item {
  padding-top: 24rpx;
}

.detail-amount {
  font-size: 36rpx;
  font-weight: 700;
  color: #00b894;
}

/* 操作提示 */
.action-content {
  display: flex;
  align-items: center;
  padding: 32rpx;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.action-text {
  flex: 1;
}

.action-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8rpx;
  display: block;
}

.action-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  line-height: 1.5;
  display: block;
}

/* 线下支付回执上传 */
.receipt-upload {
  padding: 32rpx;
  border-top: 2rpx solid #f5f5f5;
}

.upload-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.upload-btn {
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 50rpx;
  padding: 12rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
  font-size: 28rpx;
  font-weight: 500;
}

.upload-btn:active {
  transform: scale(0.98);
}

/* 底部操作栏 */
.action-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 50rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
  font-size: 28rpx;
  font-weight: 500;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.action-btn.secondary {
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
}

.action-btn:active {
  transform: scale(0.98);
}

.btn-text {
  color: inherit;
}

.action-btn.primary .btn-text {
  color: #fff;
}

.action-btn.secondary .btn-text {
  color: #667eea;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .success-icon {
    width: 100rpx;
    height: 100rpx;
  }
  
  .page-title {
    font-size: 36rpx;
  }
  
  .action-btn {
    font-size: 24rpx;
  }
}
</style>    